<template>
    <div class="login">
        <div class="title">登录</div>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" prop="userName">
                <el-input
                    v-model="ruleForm.userName"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passWord">
                <el-input
                    type="password"
                    v-model="ruleForm.passWord"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="checkLogin">登录</el-button>
                
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { checkLogin } from "@/api/admin";
export default {
    data() {
        return {
            ruleForm: {
                userName: "",
                passWord: "",
            },
            rules: {
                userName: [
                    {
                        type: "string",
                        /* validator: validatePass, */
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur",
                    },
                ],
                passWord: [
                    { type: "string", trigger: "blur" },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        checkLogin() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let a = await checkLogin(this.ruleForm);
                    if (a.data) {
                        alert("账号或密码错误");
                        return false;
                    } else {
                        alert("登录成功");
                        this.$router.push('/admin')
                    }
                } else {
                    alert("账号或密码错误");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>


<style lang="less" >
.login {
    width: 400px;
    height: 240px;
    padding: 20px;
    margin: 10% auto;

    border: 1px solid #ccc;
    & .title {
        text-align: center;
        height: 60px;
        font-size: 30px;
    }
}
</style>